<template>
    <div class="contents" style="padding-bottom:calc( var(--van-tabbar-height));">
        <img class="bg_s" src="http://test.bjclb.cn/uploads/assets/ydbg.png">
        <div style="width: 100%;position: sticky;padding-bottom:calc( var(--van-tabbar-height));">
            <div class="title">AI智能课件</div>
            <div class="list">
                <div class="lists" v-for="(item,index) in themelist">
                    <img @click="ai(item.download)" :src="item.cover" alt="">
                    <div class="c33 f14">
                        <div @click="ai(item.download)">{{item.title}}</div>
                        <div class="c99 f12 time p-r">
                            <div class=" ov">{{item.created_at}}</div>
                            <img @click="show(item.id,item.download)" src="http://test.bjclb.cn/uploads/assets/caozuo.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        <van-pagination @change="pages_" v-model="currentPage"  :page-count="pages" mode="simple" />

        </div>
        <van-action-sheet v-model:show="shows" :actions="actions" cancel-text="取消" close-on-click-action
            @select="onSelect" />
    </div>
</template>

<script lang="ts" setup>

import Navi from "./Navi.vue";
import { ref, onMounted } from "vue";
import { list,remove } from "@/axios/index";
import { showSuccessToast,showConfirmDialog} from "vant";
import router from "@/router";
const type = ref<number>(2);
const shows = ref<boolean>(false);
const index = ref<number>(0);

const pages =ref<number>(1);
const currentPage = ref(1);
const themelist = ref<Array>([])
const ai = (val) => {
    window.open("https://view.officeapps.live.com/op/view.aspx?src=" + val);
};
const lists = async () => {
    let { data } = await list({
        page:currentPage.value,
        limit:12
    });
    if (data.code == 0) {
        themelist.value = data.data.orders
        pages.value = data.data.pages
        console.log(pages.value);
        
    } else {

    }
};
const pages_ = async (val) => {
    currentPage.value = val
    lists();
};
const actions = [
    { name: '下载' },
    { name: '删除', color: '#ee0a24' }
];
const show = async (val,url) => {
    id.value = val
    url_.value = url
    shows.value = true
};
const url_ = ref("");
const onSelect = (item) => {
    console.log(item);
    if(item.name == '下载'){
        const link = document.createElement("a");
        // 这里是将链接地址url转成blob地址，
        fetch(url_.value)
        .then(res => res.blob())
        .then(blob => {
        link.href = URL.createObjectURL(blob);
        // 下载文件的名称及文件类型后缀
        link.download = url_.value;
        document.body.appendChild(link);
        link.click();
        //在资源下载完成后 清除 占用的缓存资源
        window.URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
        type.value = -1
        });
    }else{
        showConfirmDialog({
            title: '温馨提示',
            message:
                '确定要删除当前PPT吗？',
        })
        .then(() => {
            deletes_();
        })
        .catch(() => {
            // on cancel
        });
    }
};
const id = ref("")
const deletes_ = async (val) => {
    let { data } = await remove({
        id:id.value
    });
    if (data.code == 0) {
        showSuccessToast({ message: '删除成功', forbidClick: true });
        type.value = -1
        lists()
    } else {

    }
};
onMounted(() => {
    lists();
});
</script>

<style lang="scss" scoped>

::v-deep .van-pagination__items{
    margin: 0 40px;
}
::v-deep .van-pagination__page-desc{
    height: auto;
    font-size: 30px;
}
 ::v-deep  .van-pagination__item{
    height: 60px;
    font-size: 30px;
    bottom{
        width:  30px;
    }
}
.list {
    border-radius: 20px 20px 0px 0px;
    margin: 30px 30px 0 30px;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 100px;

    .lists {
        background: #FCFDFF;
        border-radius: 12px;
        border: 1px solid #EBEBEB;
        width:  calc(49% - 2px);
        margin-right:1%;
        margin-bottom: 30px;
        overflow: hidden;
        &:nth-child(2n) {
            margin-right: 0;
        }

        img {
            width: 100%;
            height: auto;
        }

        .c33 {
            padding: 10px 14px;
        }

        .time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;

            img {
                width: 30px;
                height: auto;
                margin-left: 5px;
            }
        }
    }

}


.title {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    background-color: #247af1;
    color: #ffffff;
    font-weight: bold;
    font-size: 36px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    z-index: 1;
}

.bg_s {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: inline-block;
}
</style>